<template>
    <sidebar v-model="sidebarStatus"
        :enable="enableSidebar"
    >
        <!-- sidebar 内容部分 -->
        <div
            class="app-sidebar-content">
            <!-- 用户信息 -->
            <div class="app-sidebar-user">
                <template v-if="userInfo.accessToken">
                    <div class="user-box">
                        <img class="user-avatar" :src="userInfo.avatar_url" :alt="userInfo.loginname">
                        <div class="user-info">
                            <div class="user-name">{{userInfo.loginname}}</div>
                        </div>
                    </div>
                    <i class="iconfont icon-arrow-right jump-icon"></i>
                </template>
                <template v-else>
                    <div class="user-box" @click.stop="closeAndGo('/login')">
                        <i class="iconfont icon-arrow-right-fill login-icon"></i>
                        登陆
                    </div>
                </template>
            </div>

            <!-- 导航列表分区块 -->
            <div v-if="blocks" class="app-sidebar-blocks">
                <ul>
                    <!-- 单个区块 -->
                    <li v-for="(block, index) in blocks" :key="index" class="app-sidebar-block">
                        <div v-if="block.sublistTitle" class="sub-list-title">{{ block.sublistTitle }}</div>
                        <ul v-if="block.list">
                            <li v-for="item in block.list" :key="item.text" @click.stop="closeAndGo(item.route)">
                                <span v-if="item.icon || item.image" class="app-sidebar-block-left-icon">
                                    <img v-if="item.image" :src="item.image" :alt="item.alt"></img>
                                    <i class="iconfont" :class="item.icon"></i>
                                </span>
                                <span v-if="item.text" class="app-sidebar-block-text">{{ item.text }}</span>
                            </li>
                        </ul>
                    </li>
                    <template v-if="userInfo.accessToken">
                        <li class="app-sidebar-block">
                            <div class="sub-list-title">设置</div> 
                            <ul>
                                <li>
                                    <span class="app-sidebar-block-left-icon">
                                        <i class="iconfont icon-zhaopinqiatan"></i>
                                    </span> 
                                    <span 
                                        class="app-sidebar-block-text" 
                                        @click="logout">退出登陆</span>
                                </li>
                            </ul>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </sidebar>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex';
import Sidebar from './Sidebar';
import Toast from "@/components/toast"
import { LOGOUT } from '@/store/appShell/common'

export default {
    components: {
        Sidebar
    },
    computed: {
        ...mapState('appShell/appSidebar', [
            'show',
            'title',
            'blocks'
        ]),
        ...mapGetters('appShell/appSidebar', ['userInfo']),
        sidebarStatus: {
            get() {
                return this.show;
            },
            set(val) {
                if (val) {
                    this.$emit('show-sidebar');
                }
                else {
                    this.$emit('hide-sidebar');
                }
            }
        },
        enableSidebar() {
            return this.$store.state.appShell.appHeader.show
                && this.$store.state.appShell.appHeader.showMenu;
        }
    },
    methods: {
        close() {
            this.sidebarStatus = false;
        },
        closeAndGo(route) {
            this.$router.push(route);
            this.close();
        },
        logout() {
            this.$store.commit(`appShell/common/${LOGOUT}`)
            this.close();
            Toast('退出成功')
        }
    }
};
</script>

<style lang="stylus" scoped>
@require '~@/assets/stylus/variable'
// 左侧触发滑动宽度
$swipe-width = 20px

ul,li
    padding 0
    margin 0
    list-style none
a
    text-decoration none
    color #333

.app-sidebar-content
    &.app-sidebar-content-right
        box-shadow -3px 0 8px 1px rgba(0, 0, 0, 0.4)

        &.app-sidebar-title,
        &.app-sidebar-blocks
            text-align right

    .app-sidebar-title-left-icon,
    .app-sidebar-block-left-icon
        display inline-block
        width ($app-sidebar-left-icon-size + 10)px
        height 100%
        vertical-align: middle;
        img
            vertical-align middle
            width ($app-sidebar-left-icon-size)px
            height ($app-sidebar-left-icon-size)px

        .material-icons
            font-size ($app-sidebar-left-icon-size)px

    .app-sidebar-block-text
        display inline-block
        height 100%
        vertical-align middle

    .app-sidebar-title-right-logo,
    .app-sidebar-block-right-logo
        float right

        img
            width 20px
            height 20px
            margin-right 10px


    .app-sidebar-title
        color #fff
        padding 0 10px
        font-size 16px
        font-weight bold
        height $app-sidebar-title-height
        line-height $app-sidebar-title-height
        background: $colorPrimaryBlue
        text-align left
        display flex
        align-items center

    .app-sidebar-user
        padding 0 10px
        font-size 16px
        padding 14px 26px
        background-color $colorPrimaryBlue
        display flex
        justify-content space-between
        align-items center
        .user-box
            display flex
            align-items center
            color #fff
            flex 1
        img.user-avatar
                height 40px
                width 40px
                border-radius 50%
                border 1px solid #e1e1e1
        .jump-icon 
            color #fff
            font-size 18px
        .login-icon 
            font-size 26px
            line-height 1
            margin-right 8px
        .user-info
            margin-left 10px
            text-align center
            >div
                i
                    font-size 18px
                    margin-right 5px

    .app-sidebar-blocks
        text-align left

        .app-sidebar-block
            padding 10px 0
            border-bottom 1px solid #e0e0e0
            color #333

            .sub-list-title
                height $app-sidebar-nav-height
                line-height $app-sidebar-nav-height
                text-indent ($app-sidebar-left-icon-size + 8)px
                font-weight bold
                color #888

            li
                padding-left 26px
                height $app-sidebar-nav-height
                line-height $app-sidebar-nav-height


                &:last-child
                    border none

            &:last-child
                border-bottom none
</style>
    